<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript原生PC项目</title>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/index.css" />
	</head>

	<body style="height: 1000px">
		<!--包裹器   整个页面的容器-->
		<div class="wrap">
			<!--窗口侧边栏-->
			<div class="toolBar toolWrap">
				<!--内容容器-->
				<div class="content"></div>
				<!--面包屑-->
				<div class="but list"></div>
				<!--中间列表-->
				<ul class="toolList">
					<li>
						<i class="tabIcon vip"></i>
						<em>尚品汇员</em>
					</li>
					<li>
						<i class="tabIcon cart"></i>
						<em>购物车</em>
					</li>
					<li>
						<i class="tabIcon follow"></i>
						<em>我的关注</em>
					</li>
					<li>
						<i class="tabIcon history"></i>
						<em>历史记录</em>
					</li>
					<li>
						<i class="tabIcon message"></i>
						<em>消息</em>
					</li>
					<li>
						<i class="tabIcon qus"></i>
						<em>咨询</em>
					</li>
				</ul>
				<!--回到顶部-->
				<div class="back">
					<i class="tabIcon"></i>
					<em></em>
				</div>
			</div>
			<!-- 头部区域 -->
			<header class="header">
				<!--头部第一行-->
				<div class="top">
					<div class="container">
						<!--登录-->
						<div class="login">
							<p>尚品汇欢迎您！</p>
							<p>
								<span>请</span>
								<a href="###">登录</a>
								<a href="###" class="register">免费注册</a>
							</p>
						</div>
						<!--头部导航-->
						<div class="headerNav">
							<a href="###">我的订单</a>
							<a href="###">我的购物车</a>
							<a href="###">我的尚品汇</a>
							<a href="###">尚品汇会员</a>
							<a href="###">企业采购</a>
							<a href="###">关注尚品汇</a>
							<a href="###">合作招商</a>
							<a href="###">商家后台</a>
						</div>
					</div>
				</div>
				<!--头部第二行-->
				<div class="bottom">
					<h1 class="logoArea">
						<a href="###">
							<img src="img/Logo.png" alt="尚品汇" />
						</a>
					</h1>
					<div class="searchArea">
						<form action="">
							<input type="text" />
							<button>搜索</button>
						</form>
					</div>
				</div>
			</header>
			<!--商品导航分类-->
			<div class="typeNav">
				<div class="container">
					<h2 class="all">全部商品分类</h2>
					<nav>
						<a href="###">服装城</a>
						<a href="###">美妆馆</a>
						<a href="###">尚品汇超市</a>
						<a href="###">全球购</a>
						<a href="###">闪购</a>
						<a href="###">团购</a>
						<a href="###">有趣</a>
						<a href="###">秒杀</a>
					</nav>
				</div>
			</div>
			<!--商品主要内容区域-->
			<section class="con">
				<!--路径导航-->
				<div class="conPoin">
					<!-- <a href="###">手机、数码、通讯</a>
        <a href="###">手机</a>
        <a href="###">Apple苹果</a>
        <a>iphone 6S系类</a> -->
				</div>
				<!--主要内容区域-->
				<div class="mainCon">
					<!--左侧放大镜-->
					<div class="previewWrap">
						<!--放大镜效果-->
						<div class="preview">
							<!--小图-->
							<div class="zoom">
								<!-- <img src="img/s1.png" alt=""> -->
							</div>
							<!--大图-->
						</div>
						<!--缩略图效果-->
						<div class="specScroll">
							<a class="prev">&lt;</a>
							<div class="itemCon">
								<ul class="list">
									<!-- <li><img src="img/s1.png" alt="" /></li>
									<li><img src="img/s2.png" alt="" /></li>
									<li><img src="img/s3.png" alt="" /></li>
									<li><img src="img/s1.png" alt="" /></li>
									<li><img src="img/s2.png" alt="" /></li>
									<li><img src="img/s3.png" alt="" /></li>
									<li><img src="img/s1.png" alt="" /></li>
									<li><img src="img/s2.png" alt="" /></li> -->
								</ul>
							</div>
							<a class="next">&gt;</a>
						</div>
					</div>
					<!--右侧商品信息-->
					<div class="infoWrap">
						<div class="info1"></div>
						<div class="choose">
							<div class="chooseArea">
								<div class="choosed"></div>
							</div>
							<div class="carWrap">
								<div class="controls">
									<input type="text" value="1" />
									<a href="###" class="plus">+</a>
									<a href="###" class="mins">-</a>
								</div>
								<div class="addBtn">
									<a href="###">加入购物车</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!--商品详情页-->
			<section class="productDetail">
				<!--侧边栏-->
				<aside class="aside">
					<!--选项卡切换的按钮-->
					<div class="tabWrap">
						<h4 class="active">相关分类</h4>
						<h4>推荐品牌</h4>
					</div>
					<!--选项卡内容-->
					<div class="tabContent">
						<div class="active">
							<ul class="partList">
								<li>手机</li>
								<li>手机壳</li>
								<li>内存卡</li>
								<li>iphone配件</li>
								<li>贴膜</li>
								<li>手机耳机</li>
								<li>移动电源</li>
								<li>平板电脑</li>
							</ul>
							<ul class="goodsList">
								<li>
									<div class="gImg">
										<img src="img/part01.png" alt="" />
									</div>
									<p class="attr">Apple苹果iPhone 6s (A1699)</p>
									<p class="price">¥6088.00</p>
									<div class="addCar">
										<a href="###">加入购物车</a>
									</div>
								</li>
								<li>
									<div class="gImg">
										<img src="img/part02.png" alt="" />
									</div>
									<p class="attr">Apple苹果iPhone 6s (A1699)</p>
									<p class="price">¥6088.00</p>
									<div class="addCar">
										<a href="###">加入购物车</a>
									</div>
								</li>
								<li>
									<div class="gImg">
										<img src="img/part03.png" alt="" />
									</div>
									<p class="attr">Apple苹果iPhone 6s (A1699)</p>
									<p class="price">¥6088.00</p>
									<div class="addCar">
										<a href="###">加入购物车</a>
									</div>
								</li>
								<li>
									<div class="gImg">
										<img src="img/part01.png" alt="" />
									</div>
									<p class="attr">Apple苹果iPhone 6s (A1699)</p>
									<p class="price">¥6088.00</p>
									<div class="addCar">
										<a href="###">加入购物车</a>
									</div>
								</li>
							</ul>
						</div>
						<div>推荐品牌</div>
					</div>
				</aside>
				<div class="detail">
					<div class="fitting">
						<h4>选择搭配</h4>
						<div class="goodSuits">
							<div class="master">
								<img src="img/l-m01.png" alt="" />
								<p>¥5299</p>
								<i>+</i>
							</div>
							<ul class="suits">
								<li class="suitsItem">
									<img src="img/dp01.png" alt="" />
									<p>Feless费勒斯VR</p>
									<label>
										<input type="checkbox" value="39" />
										<span>39</span>
									</label>
								</li>
								<li class="suitsItem">
									<img src="img/dp02.png" alt="" />
									<p>Feless费勒斯VR</p>
									<label>
										<input type="checkbox" value="39" />
										<span>39</span>
									</label>
								</li>
								<li class="suitsItem">
									<img src="img/dp03.png" alt="" />
									<p>Feless费勒斯VR</p>
									<label>
										<input type="checkbox" value="39" />
										<span>39</span>
									</label>
								</li>
								<li class="suitsItem">
									<img src="img/dp04.png" alt="" />
									<p>Feless费勒斯VR</p>
									<label>
										<input type="checkbox" value="39" />
										<span>39</span>
									</label>
								</li>
							</ul>
							<div class="result">
								<div>已选购<span></span>件商品</div>
								<p class="price-tit">套餐价</p>
								<p class="price">¥5299</p>
								<button>加入购物车</button>
							</div>
						</div>
					</div>
					<div class="intro">
						<ul class="tabWrap">
							<li class="active"><a href="###">商品介绍</a></li>
							<li><a href="###">规格与包装</a></li>
							<li><a href="###">售后保障</a></li>
							<li><a href="###">商品评价</a></li>
							<li><a href="###">手机社区</a></li>
						</ul>
						<div class="tabContent">
							<div class="active">
								<ul class="goodsIntro">
									<li>分辨率：1920*1080(FHD)</li>
									<li>后置摄像头：1200万像素</li>
									<li>前置摄像头：500万像素</li>
									<li>核 数：其他</li>
									<li>频 率：以官网信息为准</li>
									<li>品牌： Apple</li>
									<li>商品名称：APPLEiPhone 6s Plus</li>
									<li>商品编号：1861098</li>
									<li>商品产地：中国大陆</li>
									<li>商品毛重：0.51kg</li>
									<li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
								</ul>
								<div class="introImg">
									<img src="img/intro01.png" alt="" />
									<img src="img/intro02.png" alt="" />
									<img src="img/intro03.png" alt="" />
								</div>
							</div>
							<div>规格与包装</div>
							<div>售后保障</div>
							<div>商品评价</div>
							<div>手机社区</div>
						</div>
					</div>
				</div>
			</section>
		</div>
		<!-- 引入数据得js -->
		<script src="./js/data.js"></script>
		<script src="./js/jquery.js"></script>
		<script src="./js/index.js"></script>
	</body>
</html>
